<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环</title>

                             <!-- 循环的目的： 可以重复执行某些代码   京东右侧导航栏 可以一下全部生成 -->

                      <!-- 重要 以后出bug 可以打个断点看看运行到哪一步了            
                          断点调试 ： 帮我们观察程序的运行过程  检查控制台后面的 sources  -->

                   <!-- 这个重要  1   for循环         ： 在程序中，一组被重复执行的语句被称为  循环体  能否继续循环 取决于循环的 终止条件
                                        1.1           由循环体及循环的终止条件 组成的语句 被称之为 循环语句
                                            语法结构： for循环主要用于把某些代码循环若干次 通常与计数有关
                                                    for(初始变化量； 条件表达式； 操作表达式){
                                                        //循环体
                                                    }
                                         1.2    重复相同的代码 
                                         1.3    重复不同的代码  因为有计数器 i 的存在 i 每次循环 值 都在变化
                                         1.4    for循环因而有了技术器的存在 还可以重复的执行某些操作，比如做一些算术运算        
                                  2  双重for循环：    很多情况下 单层for循环并不能满足我们的需求， 比如我们要打印一个 5 行 5 列的图形 打印一个倒直角三角形等
                                                  此时就可以通过循环嵌套来实现

                                        循环嵌套：是指在一个循环语句中自定一个循环语句的语法结构，比如在for循环中再嵌套一个for循环，这样的语句就叫双重for循环

                                        语法结构：
                                                for（外层的初始化变量；外层的条件表达式；外层的操作表达式）{
                                                    for（里层的初始化变量；里层的条件表达式；里层的操作表达式）{
                                                        执行语句；
                                                    }
                                                }
                                            注意 ： 可以把里面的循环看作是外层循环的语句
                                                    外层循环一次  里面的循环执行全部
                        循环小结：  
                                 1   for循环可以重复执行相同的代码 
                                 2   for循环可以重复执行不同的代码  因为有计数器 i 的存在
                                 3   for循环因而有了技术器的存在 还可以重复的执行某些操作，比如做一些算术运算  
                                 4   双重for循环
</head> -->
<body>              
                            <!-- for循环 -->
                            <script>
                              /*   for(初始变化量； 条件表达式； 操作表达式){
                                                        //循环体
                                                 } */
                                // 初始化变量 就是用 var 声明的一个普通变量，通常用于作为 计数器使用
                                // 条件表达式  就是用来决定每一次循环是否继续执行 就是终止的条件
                                // 操作表达式 是每次循环 最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）

                                // 代码体验  重复打印100句 你好  

                                // 重复相同的代码
                                // for (var i = 1; i <=100; i++ ){
                                //     console.log('我爱你');
                                // }
                                // 执行思路
                                    // 1  首先执行里面的计数变量 var i = 1 但这句话在 for里面只执行一次 i是index的缩写一般用i表示   
                                    // 2  去 i <= 100 来判断是否满足条件 ，如果满足条件 就去 执行 循环体 console.log 不满足条件 就退出循环体
                                    // 3  最后去执行 i++   i++ 是单独写的代码 递增  第一轮结束
                                    // 4  接着去执行 i <= 100 如果满足条件就去执行 循环体 不满足就退出 循环体 第二轮结束  以此类推

                                // 可以让用户控制输出的次数

                                //  var num = prompt('请您输入次数');
                                //   for (var i = 1; i <= num; i++) {
                                      
                                //     console.log('我爱你');
                                    
                                //   }

                                // 1.3  重复不同的代码  因为有计数器 i 的存在 i 每次循环 值 都在变化
                                // 我们想要输出一个人 1~100岁
                                    // 第一种写法
                              /*   for (i = 1; 1 <= 100; i++){
                                        console.log('这个人今年'+i+'岁了');
                                    }
                                     */
                                    // 第二种写法
                             /*        for (i = 1; 1 <= 100; i++){
                                        if(i == 1){
                                            console.log('这个人1岁了，她出生了');
                                    }else if(i == 100){
                                        console.log('这个人100岁了，他死了');
                                    }else{
                                        console.log('这个人今年'+i+'岁了');
                                    }

                                    } */
                                    // 1.4   案例 做1~100之间所有整数的累加和
                                   /*  做法步骤： 1 需要循环100次 我们需要一个计数器 i
                                              2 需要一个存储结果的变量 sum 但是初始值一定是 0
                                              3 核心算法 1+2+3+4...      sum = sum + i; */
                                    //          var  sum =0;
                                    // for (i = 1; 1<= 100; i++){
                                    //     sum = sum + i;
                                    //     //sum += i; 与上面的相同
                                    // }
                                    // console.log(sum);
                             </script> 

                             <!-- 双重for循环 -->
                             <!-- for（外层的初始化变量；外层的条件表达式；外层的操作表达式）{
                                for（里层的初始化变量；里层的条件表达式；里层的操作表达式）{
                                    执行语句；
                                }
                            }
                        注意 ： 可以把里面的循环看作是外层循环的语句
                                外层循环一次  里面的循环执行全部 -->
                                <script>
                                for (i = 1; i <= 3; i++){
                                    console.log('这是外层循环的第'+i+'次');
                                    for (var j = 1; j <= 3; j++ ){
                                        console.log('这是里层循环的第'+j+'次');  // 外层循环执行1次 里面循环就执行3次
                                    }
                                }
                                </script>
</body>
</html>     